<script setup lang="ts">
import { onMounted } from 'vue';
import { useGeneral } from '@/hooks/useGeneral';
import { useAtlasStore } from '@/store/modules/atlas';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';
import { useSiteInfoStore } from '@/store/modules/earlyWarning/useSiteInfoStore';
import { useNetworkRiskGradingStore } from '@/store/modules/earlyWarning/networkRiskGrading';

const { retract, bigModule } = useGeneral();
const titleHandle = (title: string) => {
  switch (title) {
    case COMPONENT_TITLES.SITE_INFO:
      openSiteInfo();
      break;
    case COMPONENT_TITLES.NETWORK_TITLE:
      pipDialogOpen();
      break;
    default:
      break;
  }
};
const { openSiteInfo } = useSiteInfoStore();
const { pipDialogOpen } = useNetworkRiskGradingStore();
const { updateSvgUrl } = useAtlasStore();
onMounted(() => {
  updateSvgUrl();
});
</script>

<template>
  <div class="big-container">
    <topComponents class="topComponents-box" />
    <get-current-time-and-city />
    <transition name="el-fade-in-linear">
      <div v-if="retract" class="side-container left">
        <div class="box" v-for="item in bigModule.left" :key="item.id">
          <div @click="titleHandle(item.title)" :class="['title', item.id === 1 && 'isPointer']">{{ item.title }}</div>
          <div class="content">
            <component :is="item.components"></component>
          </div>
        </div>
      </div>
    </transition>
    <transition name="el-fade-in-linear">
      <div v-if="retract" class="side-container right">
        <div class="box" v-for="item in bigModule.right" :key="item.id">
          <div class="title">{{ item.title }}</div>
          <div class="content">
            <component :is="item.components"></component>
          </div>
        </div>
      </div>
    </transition>
    <routerButton class="router-box" />
  </div>
</template>

<style scoped lang="scss">
.big-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 50px;
  position: relative;

  .topComponents-box {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
  }

  .router-box {
    z-index: 4;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
  }
}

.side-container {
  z-index: 5;
  flex: 0 0 25%;

  .box {
    border-radius: 4px;
    padding: 10px;
    display: grid;
    grid-template-rows: 40px 1fr; /* 第一行固定100px，第二行占剩余空间 */

    .title {
      width: 100%;
      background: url(@/assets/largescreen/title-pic.png) no-repeat center center;
      background-size: 100% 100%;
      padding-left: 5%;
      font-size: 20px;
      color: white;
      line-height: 38px;
      font-family: PangMenZhengDao;
    }

    .isPointer {
      cursor: pointer;
    }

    .content {
      font-size: 14px;
      padding-top: 1rem;
    }
  }
}

.left {
  display: flex;
  flex-wrap: wrap;

  .box {
    flex: 0 0 33%; /* 三列平分，考虑间距 */
    height: 20.435rem;
  }

  .box:last-child {
    flex: 0 0 100%; /* 占满整行 */
  }
}

.right {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .box {
    height: 20.435rem;
  }

  .box:nth-child(1),
  .box:nth-child(3) {
    width: 40%;
  }

  .box:nth-child(2),
  .box:nth-child(4) {
    width: 60%;
  }

  .box:nth-child(5),
  .box:nth-child(6) {
    width: 48%;
  }
}
</style>
